$(function() {
    // 1.1 获取裁剪区域的 DOM 元素
    const $image = $('#image');
    const $file = $(`#file`);
    if (parent.usrData.data.user_pic) $image.attr(`src`, parent.usrData.data.user_pic);
    // 1.2 配置选项
    const options = {
            // 纵横比
            aspectRatio: 1,
            // 指定预览区域
            preview: '.img-preview'
        }
        // 1.3 创建裁剪区域
    $image.cropper(options);
    $(`#btnChooseImage`).on(`click`, function() {
        $file.trigger(`click`);
    });
    $file.on(`change`, function() {
        const files = this.files;
        if (files.length) {
            const imgURL = URL.createObjectURL(files[0]);
            $image.cropper('destroy') // 销毁旧的裁剪区域
                .attr('src', imgURL) // 重新设置图片路径
                .cropper(options); // 重新初始化裁剪区域
        } else {
            return layer.msg(`还没选择图片!`);
        }
    });
    $(`#btnUpload`).on(`click`, function() {
        const data64 = $image
            .cropper('getCroppedCanvas', {
                // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png');
        Ajax(`post`, `/my/update/avatar`, { avatar: data64 }, function(res) {
            if (res.status) return layer.msg(res.message);
            layer.msg(res.message, { time: 1000 });
            parent.getIndex();
        })
    })
})